<template>
  <div class="detail">
    <div class="detail-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
        <van-swipe-item v-for="render in detail.photo" :key="render.id">
          <img :src="render.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="detail-intro">
      <h3>{{detail.title}}</h3>
      <div class="detail-info">
        <div class="box">
          <del>原价：{{(detail.originPrice)}}</del>
          <span>￥{{detail.price}}</span>
        </div>
        <span>{{detail.couponValue}}</span>
      </div>
      <ul>
        <li v-for="more in detail.descContentList" :key="more.id">
          <img :src="more.image.url" alt="">
        </li>
      </ul>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
      <van-goods-action-icon icon="cart-o" :badge="totalCount | over99" to="/cart" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addToCart({detail})" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import {
  mapMutations,
  mapGetters
} from 'vuex'

export default {
  data () {
    return {
      id: '',
      detail: {}
    }
  },
  created () {
    this.id = this.$route.query.id
    this.$http.getDetail(this.id)
      .then(resp => {
        // console.log(resp)
        const {
          id,
          title,
          price,
          photo,
          originPrice,
          couponValue,
          descContentList
        } = resp.detail
        this.detail = {
          id,
          title,
          price,
          photo,
          originPrice,
          couponValue,
          descContentList
        }
      })
  },
  methods: {
    ...mapMutations(['addToCart'])
  },
  computed: {
    ...mapGetters(['totalCount'])
  }
}
</script>

<style lang="scss" scoped>
.detail {
  line-height: 2;
  &-swipe {
    img {
      width: 100%;
    }
  }
  h3 {
    font-size: 14px;
    color: #43240c;
  }
  &-intro {
    padding: 0 10px;
  }
  &-info {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    span:last-child {
      font-size: 12px;
      color: #ee0a24;
    }
    .box{
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      del {
        color: #999;
        }
      span{
        font-size: 20px;
        color: #ee0a24;
      }
    }
  }
}
</style>
